<!DOCTYPE html>
<html class="${bg!}">

@/**
@ *      本页面所用的模板变量
@ *
@ * title          :  页面的标题
@ * layoutContent  :  主页面的html内容
@ * js             :  业务所需要的js，为数组
@ * css            :  业务所需要的css，为数组
@ * bg             :  背景颜色
@ * plugins        :  需要用到的插件，目前有["ztree"]
@ **/

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>${title!"管理系统"}</title>
    <link rel="stylesheet" href="${ctxPath}/assets/common/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/common/module/admin.css" media="all"/>
    <link rel="stylesheet" href="${ctxPath}/assets/expand/css/style.css" media="all"/>
    <!--<link rel="stylesheet" href="${ctxPath}/assets/common/module/grid/gm.css" media="all"/>
    <link rel="stylesheet" href="${ctxPath}/assets/common/module/grid/common.css" media="all"/>-->
    <!--<link rel="stylesheet" href="${ctxPath}/assets/common/module/ligergrid/css/ligerui-all.css" media="all"/>-->

    <!--其他插件css-->
    @if(isNotEmpty(plugins)){
        @if(array.contain(plugins,"ztree")){
        <link href="${ctxPath}/assets/expand/plugins/ztree/zTreeStyle.css" rel="stylesheet" type="text/css" />
        @}
    @}

    @/* 其他业务用的css */
    @if(isNotEmpty(css)){
        @for(item in css){
            @if(strutil.startWith(item,"/")){
                @item = ctxPath + item;
            @}
            <link href="${item}" rel="stylesheet" type="text/css" />
        @}
    @}
</head>

<body>

@/* 页面加载loading */
@ include("/common/loading.html"){}

@/* 正文 */
${layoutContent}

@/* 加入contextPath属性和session超时的配置 */
<script type="text/javascript">
    var Feng = {
        ctxPath: "",
        addCtx: function (ctx) {
            if (this.ctxPath === "") {
                this.ctxPath = ctx;
            }
        }
    };
    Feng.addCtx("${ctxPath}");
</script>

@/* js和业务用的js数组 */
<script type="text/javascript" src="${ctxPath}/assets/common/libs/layui/layui.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js"></script>

<!--其他插件js-->
@if(isNotEmpty(plugins)){
    @if(array.contain(plugins,"ztree")){
    <script src="${ctxPath}/assets/expand/plugins/jquery/jquery-3.2.1.min.js"></script>
    <script src="${ctxPath}/assets/expand/plugins/ztree/jquery.ztree.all.min.js"></script>
    @}
@}

@if(isNotEmpty(js)){
    @for(item in js){
        @if(strutil.startWith(item,"/")){
            @item = ctxPath + item;
        @}
        <script src="${item}"></script>
    @}
@}
<!-- 导出 xlsx 文件 -->
<script src="/assets/excel/xlsx.full.min.js"></script>
<script>
    /******************************** 方法一 ***********************************/
    // 2、导出excel方法
    function exportToXlsx(data, columns, fileName) {
        // 创建一个包含列标题的数组
        var headerRow = columns.map(col => col.title);

        // 准备数据行，确保每个数据对象的属性与列标题对应
        var dataRows = data.map(row => {
            return columns.map(col => {
                // 确保row对象中有与col.field对应的属性
                return row[col.field] || '';
            });
        });

        // 将列标题行和数据行合并为工作表数据
        var sheetData = [headerRow].concat(dataRows);

        // 转换为工作表
        var ws = XLSX.utils.aoa_to_sheet(sheetData);

        // 创建工作簿并添加工作表
        var wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

        // 导出文件
        var wbout = XLSX.write(wb, {bookType:'xlsx', type:'binary'});
        var blob = new Blob([s2ab(wbout)], {type:"application/octet-stream"});

        // 创建下载链接并触发下载
        var link = document.createElement("a");
        link.href = URL.createObjectURL(blob);
        link.download = fileName || 'table.xlsx';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }

    // 3、辅助函数，用于转换字符串为数组缓冲
    function s2ab(s) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i=0; i<s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
    }

    /******************************** 方法二 ***********************************/

    // 表格转Excel文件
    function tableToExcel(data, columns, filename) {
        // 创建一个空的表格DOM
        let exportTable = document.createElement('table');
        exportTable.setAttribute('border', '1');

        // 添加表头
        let thead = document.createElement('thead');
        let headerRow = document.createElement('tr');
        columns.forEach(column => {
            let th = document.createElement('th');
            th.textContent = column.title;
            headerRow.appendChild(th);
        });
        thead.appendChild(headerRow);
        exportTable.appendChild(thead);

        // 添加数据行
        let tbody = document.createElement('tbody');
        data.forEach(row => {
            let tr = document.createElement('tr');
            columns.forEach(column => {
                let td = document.createElement('td');
                td.textContent = row[column.field] || ''; // 使用 column.field 来获取数据
                tr.appendChild(td);
            });
            tbody.appendChild(tr);
        });
        exportTable.appendChild(tbody);

        // 使用上面的导出逻辑
        tableToExcelDOM(exportTable, filename);
    }

    // 将表格DOM转换为Excel文件并触发下载
    function tableToExcelDOM(tableDOM, filename) {
        let tableSheet = XLSX.utils.table_to_sheet(tableDOM);
        let workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, tableSheet, 'Sheet1');
        XLSX.writeFile(workbook, filename);
    }
</script>

</body>
</html>